<template>
  <div>
    <header>
      <div class="gly-1">
        <el-icon size="40" style="margin: 20px" @click="goBack"><ArrowLeftBold /></el-icon>
        <img src="../../image/铃铛2.png" @click="message" style="width: 60px; height: 60px; margin: 10px" />
      </div>
      <div class="my-cc">
        <div style=" display: flex; margin: 20px; margin-bottom: 0px;">
          <img :src="headpic" style="width: 120px;height: 120px; border-radius: 50%;">
        <span style="margin: 25px; margin-top: 45px; font-size: 30px;">{{ my_cc }}</span>
      </div>
        <button class="Sign_in" @click="goSign">{{ signIn?'已签到':'去签到' }}</button>
      </div>
    </header>

    <div class="case_er">
      <li class="li_on">我的问诊</li>
     <li class="li_er" @click="tiao">
        <img src="../../image/my_img/case_1.jpg" style="width: 80px; height: 80px" />
        <span>当前问诊</span>
        <el-icon size="30"  style="margin-top: 36px; margin-left: 260px"><ArrowRightBold /></el-icon>
      </li>
      <li class="li_er" @click="zhuang">
        <img src="../../image/my_img/case_2.jpg" style="width: 80px; height: 80px"/>
        <span>历史问诊</span>
        <el-icon size="30"  style="margin-top: 36px; margin-left: 260px"><ArrowRightBold /></el-icon>
      </li>
    </div>
    <!-- 功能键 -->
     <div class="Feature_er">
      <div class="Feature_six">
        <li class="li_six" @click="file">
        <img src="../../image/my_img/my_1.jpg"  alt="">
        <span>我的档案</span>
      </li>
      <li class="li_six" @click="money">
        <img src="../../image/my_img/my_2.jpg"  alt="">
        <span>我的钱包</span>
      </li>
      <li class="li_six">
        <img src="../../image/my_img/my_3.jpg"  alt="" @click="my_collect">
        <span>我的收藏</span>
      </li>
      </div>

      <div class="Feature_six">
        <li class="li_six" @click="opinio">
        <img src="../../image/my_img/my_4.jpg" style="width: 100px; height: 100px;" alt="">
        <span>被采纳建议</span>
      </li>
      <li class="li_six">
        <img src="../../image/my_img/my_5.jpg"  alt=""  @click="videos">
        <span>我的视频</span>
      </li>
      <li class="li_six" >
        <img src="../../image/my_img/my_6.jpg"  alt="" @click="mybyq">
        <span>我的病友圈</span>
      </li>
      </div>

      <div class="Feature_six">
        <li class="li_six">
        <img src="../../image/my_img/my_7.jpg"  alt="" @click="my_follow">
        <span>我的关注</span>
      </li>
      <li class="li_six">
        <img src="../../image/my_img/my_8.jpg" alt="" @click="rw">
        <span>我的任务</span>
      </li>
      <li class="li_six" @click="setting">
        <img src="../../image/my_img/my_9.jpg"  alt="">
        <span>设置管理</span>
      </li>
      </div>

     </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const my_img=ref("../../image/wx.png")
const my_cc=ref(localStorage.getItem("userName"))
const headpic = ref(localStorage.getItem("headpic" || ""))
import { useRouter } from "vue-router";
const router=useRouter()
const tiao=()=>{
  router.push("/dqwz")
}
const zhuang=()=>{
  router.push("/yswz")
}
// 跳转到我的消息页
const message = () => {
    router.push('/my_message')
    console.log('跳转到我的消息页');
}
// 我的关注
const my_follow=()=>{
   router.push("/my_follow")
}
//跳转我的任务页
const myrenwu = () => {
  router.push('/my_renwu')
}
// 我的病友圈
// 病友圈
const mybyq=()=>{
  router.push("/mybyq")
}
// 返回首页
const goBack=()=>{
  router.push('/home')
}
// 我的档案
const file=()=>{
  router.push("/my_file")
}

// 我的钱包
const money=()=>{
  router.push("/money")
}

// 设置管理
const setting=()=>{
  router.push("/setting")
}
const opinio=()=>{
   router.push("/opinio")
}
// 我的视频
const videos=()=>{
  router.push("/my_video")
}

// 我的任务
const rw=()=>{
  router.push("/my_renwu")
}

// 我的收藏
const my_collect=()=>{
  router.push("/my_collect")
}
// 签到跳转
const goSign = () => {
  router.push('/my_renwu')
}
const signIn = localStorage.getItem('signin')

</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
header {
  /* background-color: #3087ea; */
  width: 100%;
  height: 225px;
  /* 引入背景图片 */
  background-image: url("../../image/grbj.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.gly-1 {
  width: 100%;
  height: 40px;
  /* background: pink; */
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}
.headers {
  /* background-color: #3087ea; */
  border-bottom: none;
}

.my-cc{
  display: flex;
  justify-content: space-between;
  /* background: pink; */
}

.Sign_in{
  width: 50px;
  height: 30px;
  margin: 10px;
  margin-top: 35px;
  border: none;
  border-radius: 7.5px;
  margin-bottom: 0px;
}

.case_er{
  width: 300px;
  height: 150px;
  background: #fff;
  position: absolute;
  top: 160px;
  left: 10%;
  border-radius: 12.5px;
  box-shadow:  0px 7.5px 17.5px rgba(0, 0, 0, 0.2);
}

.li_on{
  padding: 12.5px;
}

.li_er{
  display: flex;
      justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-left: 12.5px;
    margin-top: 10px;
}

.li_er span{
  margin-top: 15px;
  margin-left: 15px;
}

.Feature_er{
  width: 100%;
  height: 300px;
  margin-top: 100px;
}

.Feature_six{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.li_six{
  width: 65px;
  height: 50px;
  display: flex;
  flex-direction: column;
  margin: 12.5px;
  padding-top: 20px;
}

.li_six img{
  width: 40px;
  height: 40px;
  margin: 5px auto;
}

.li_six span{
  margin: 5px auto;
  text-align: center;
}
</style>
